<script setup lang="ts">
import { ref } from 'vue';

const arr = Array.from({length: 100}, (_, i) => i + 1)

const colors = arr.map(() => {
  return {
    red: ref(0),
    blue: ref(0),
    green: ref(0)
  };
});

 setInterval(() => {
  colors.forEach(color => {
    color.red.value = Math.floor(Math.random() * 255);
    color.blue.value = Math.floor(Math.random() * 255);
    color.green.value = Math.floor(Math.random() * 255);
  });
}, 1000);
</script>

<template>
  <router-link to="/">Home</router-link>
<div class="container">
  <div v-for="(i,index) in arr" :key="i" class="point" :style="{'--red': colors[index].red.value, '--green': colors[index].green.value, '--blue': colors[index].blue.value}" />
</div>
</template>

<style scoped lang="scss">
@use "sass:math";

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
} 

.point{
  background-color: rgb(var(--red),var(--green),var(--blue));
  // background-color: rgb(100, 200, 40);
  // background-color: red;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  // animation: move 1s linear infinite alternate;
  animation: move 1s cubic-bezier(0.1, 0.8, 0.9, 0.1) infinite alternate;

}

@keyframes move {
  0% { transform: translateY(0); }
  50% { transform: translateY(100px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); animation-timing-function: ease-out; }
}
@for $i from 1 through 100 {
  .point:nth-child(#{$i}) {
    animation-delay: #{math.div(math.random(1000),1000) + 1}s;
    animation-duration: #{math.div(math.random(2000),1000) + 1}s;
  }
}
</style>
